


<template>
  <div class="ordersList">

    <div class="content">
      <el-row>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>线索列表</el-breadcrumb-item>

        </el-breadcrumb>

      </el-row>
      <el-row :gutter="12">
        <!--todo 响应式-->
        <el-col :span="16">



          <el-select @change="query" style="width:100px" size="small" v-model="vm.query.intention_level" placeholder="意向等级">
            <el-option label="全部" value=""></el-option>
            <el-option label="随便问问" value="low"></el-option>
            <el-option label="考虑中" value="middle"></el-option>
            <el-option label="高意向" value="high"></el-option>

          </el-select>
          <el-select @change="query" style="width:100px" size="small" v-model="vm.query.shop_id" placeholder="选择店铺">
            <el-option
              v-for="item in shops"
              :key="item.id"
              :label="item.shop_name"
              :value="item.id">
            </el-option>

          </el-select>
          <el-date-picker
            size="small"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-col>
        <el-col :span="8">
          <el-input style="width:200px" size="small" placeholder="按关键词进行搜索" v-model="vm.query.keyword" class="input-with-select">
            <el-button size="small" @click="query({reload:true})" slot="append" icon="el-icon-search"></el-button>
          </el-input>
          <el-button size="small" type="primary" :disabled="!tids.length" @click="dialogVisible = true,appiotMany=true">批量指派店铺</el-button>
          <el-dialog :visible.sync="dialogVisible">

            <mt-dialog :items="shops" name="shop_name" @change="changShop"></mt-dialog>

            <div slot="footer" class="dialog-footer">


              <el-button size="small"  @click="assign" type="success">指派</el-button>

              <el-button size="small" @click="dialogVisible = false">取 消</el-button>
            </div>
          </el-dialog>

        </el-col>

      </el-row>

      <el-table
        :data="vm.models" ref="multipleTable"
        stripe
        @selection-change="handleSelectionChange"
        style="width: 100%">
        <!-- <template slot="empty">
          <div class="mt-loading"><i class="el-icon-loading"></i>
          </div>
        </template> -->

        <el-table-column

          prop="id"
          label="#"
          width="60">
        </el-table-column>
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column

          prop="create_time"
          label="生成时间"
        >
        </el-table-column>
        <el-table-column
          label="客户头像"
          width="80"
        >
          <template slot-scope="scope">
            <span><img width="60px" :src="scope.row.avatar" alt=""> </span>

          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="客户姓名"
          width="90"
        >
        </el-table-column>
        <el-table-column
          prop="phone"
          label="客户电话"
          width="120"
        >

        </el-table-column>
        <el-table-column
          prop="model_name"
          label="意向车型"
        >

        </el-table-column>
        <el-table-column
          prop="shop_name"
          label="所属店铺"
        >

        </el-table-column>
        <el-table-column
          prop="clue_source"
          label="线索来源"
        >
          <template slot-scope="scope">


            <div v-if="scope.row.clue_source=='shop'">商城</div>
            <div v-if="scope.row.clue_source=='diy'">diy购车</div>
            <div v-if="scope.row.clue_source=='other'">其它</div>

          </template>
          <!--//shop 商城  diy diy购车 other 其它-->
        </el-table-column>

        <el-table-column
          label="操作"
          width="200"
        >
          <template slot-scope="scope">

            <!--<router-link :to="{ name:'threadsEdit',params: { id: scope.row.id }}" append>-->
              <!--<el-button type="primary" size="mini">-->

                <!--详情-->
              <!--</el-button>-->
            <!--</router-link>-->
            <el-button @click="dialogVisible = true,appiotMany=false,tid=scope.row.id" size="mini">

              指派店铺
            </el-button>
          </template>
        </el-table-column>

      </el-table>
      <el-pagination
        background
        v-if="!vm.isLoading"
        @current-change="pageChange($event)"
        :page-size="vm.meta.size"
        :current-page="vm.meta.page"
        layout="total,prev, pager, next"
        :total="vm.meta.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  //  todo 增加路由的参数,配置html5Mode ,导航方法封装
  import Vue from 'vue'
  import * as Models from '@/api/threads'
  import * as Shops from '@/api/shops'
  import mtDialog from '@/components/DialogPicker'

  export default{
    name: "threadsNewList",
    computed: {

    },

    components: {
      mtDialog
    },
    data(){
      return{
        vm:{
          models:[],
          isNull:false,
          isLoading:false,
          isError:false,
          meta:{},
          query:{}
        },
        shops:[],
        sid:0,
        tids:[],
        tid:-1,
        dialogVisible:false,
        appiotMany:false

      }
    },
    computed:{},
    mounted() {
      var that=this;
      this.query({reload:true})
      Shops.query().then(function(res){
        that.shops=res.pass_list;
      })
    },
    methods: {
      toggleSelection(rows) {
        var that=this;
        if (rows) {
          rows.forEach(function(row){
            console.log(row);
            that.$refs.multipleTable.toggleRowSelection(row)
          });
        } else {
          that.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        let _arr=[];
        val.forEach(function(t){
          _arr.push(t.id)
        });

        this.tids = _arr;
        console.log(this.tids);

      },
      assign:function(){
        var that=this;
        var _q={};
        _q.target_shop_id=that.sid;
        if(that.appiotMany){
          _q.thread_ids=that.tids;

        }else{
          _q.thread_ids=[that.tid];

        }
        Models.assign(_q).then(function(res){
          that.dialogVisible=false;
          that.$message({
            message: '指派成功,刷新页面中',
            type: 'success'
          });

          that.query({reload:true})
        }).catch(function(message){
          that.$message({
            message: message,
            type: 'warning'
          });
        })


      },

      changShop:function(e){
        this.sid=e;
      },

      _reset:function(){
        this.vm.query.page=1;
        this.vm.query.intention_level;
      },
      query:function(config){

        var that=this;


        if(config&&config.reload){
          that._reset();
        }
        that.vm.models=[];

        Models.queryNew(that.vm.query).then(function(data){

          that.vm.models=data.models;
          if(data.meta){
            that.vm.meta={
              page:data.meta.page*1,
              size:data.meta.size*1,
              total:data.meta.total*1
            }
          }
        }).catch(function(){
          that.vm.isError=true;
        });
      },
      pageChange:function(e){
        Vue.set(this.vm.query,'page',e)
        this.query();
      },


    }

  }
</script>
